<script setup>
import { ref } from "vue"
const addOrEidt = ref({
    tag: false,
    title: "",
})

// 弹窗数据
const form = reactive({
    name: "",
    description: ""
});

// 添加操作
const add = () => {
    form.name = "";
    form.description = "";
    form.id = "";
    dialogFormVisible.value = true;
    addOrEidt.value.title = "添加项目";
    addOrEidt.value.tag = true;
};

// 新增操作
const addProject = function () {
    if (addOrEidt.value.tag) {
        addProjectService(form);
    } else {
        updateProjectService(form);
    }

    dialogFormVisible.value = false;
    setTimeout(() => {
        getProjectList();
    }, 500);
};

// 修改操作
const updateProject = function (value) {
    addOrEidt.value.title = "编辑项目";
    dialogFormVisible.value = true;
    form.name = value.name;
    form.description = value.description;
    form.username = value.username;
    form.id = value.id;
    addOrEidt.value.tag = false;
};

</script>
<template>
    <el-dialog v-model="dialogFormVisible" :title="addOrEidt.title" width="500">
        <el-form :model="form">
            <el-form-item label="项目名称">
                <el-input v-model="form.name" autocomplete="off" aria-placeholder="项目名称" />
            </el-form-item>
            <el-form-item label="项目描述">
                <el-input v-model="form.description" autocomplete="off" aria-placeholder="项目描述" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addProject"> 提交 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style></style>